<template>
	<view class="c-content">
		<view class="operate-a">
			<view class="item">
				<text class="item-title"  v-for="(item,index) in typeLS" :key="index" @click="onItem(item)"
				 :class="typeIndex == item.id ? 'active' : ''">{{item.title}}</text>
			</view>
			
			<view class="item-type">
				<view class="i-title" v-for="(itemt,indext) in data1" :key="indext">
					{{itemt.title}} <text>({{itemt.num}})</text>
				</view>
			</view>
			<view class="item-code">
				<view class="i-title" v-for="(itemc,indexc) in data2" :key="indexc">
					{{itemc.title}} <text>({{itemc.num}})</text>
				</view>
			</view>
			
			<view class="item-operate">
				<view class="item-o" v-for="(item,index) in operateLS" :key="index">
					<view class="o-l">
						{{item.title}}
					</view>
					<view class="o-r">
						<view class="reduce" @click="reduceNum(index)">&#8722;</view>
						<view class="num">{{item.num}}</view>
						<view class="plus" @click="plusNum(index)">&#43;</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				typeLS:[
					{
						title:"帆布",
						id:1,
					},
					{
						title:"塑料",
						id:2,
						
					},
					{
						title:"麻布",
						id:3,
					}
				],
				typeIndex:1,
				data1:[
					{
						title:"粉色",
						num:33
					},
					{
						title:"蓝色",
						num:33
					},
					{
						title:"白色",
						num:33
					}
				],
				data2:[
					{
						title:"36码",
						num:33
					},
					{
						title:"37码",
						num:33
					},
					{
						title:"38码",
						num:33
					}
				],
				operateLS:[
					{
						title:"包",
						num:5
					},
					{
						title:"盒",
						num:5
					},
					{
						title:"个",
						num:5
					}
				],
			};
		},
		methods:{
			onItem(item)
			{
				if(this.typeIndex == item.id) return;
				this.typeIndex = item.id;
			},
			
			reduceNum(index)
			{
				if(this.operateLS[index].num == 0) return;
				this.operateLS[index].num--;
			},
			
			plusNum(index)
			{
				this.operateLS[index].num++;
			},
		}
	}
</script>

<style lang="scss">
	.c-content
	{
		margin-top: 10px;
		.operate-a
		{
			padding: 10px 20px;
			background: #FFF;
			.item
			{
				display: flex;
				.item-title
				{
					margin-right: 20px;
					font-size: 14px;
				}
				.active
				{
					color: #3388FF;
					border-bottom: 2px solid #3388FF;
				}
			}
			.item-type,.item-code
			{
				display: flex;
				padding: 10px 0;
				.i-title
				{
					margin-right: 10px;
					font-size: 14px;
					width: 75px;
					height: 30px;
					line-height: 30px;
					color: #3388FF;
					border-radius: 5px;
					text-align: center;
					border: 1px solid #3388FF;
					text
					{
						color: #FF3333;
					}
				}
			}
			.item-operate
			{
				.item-o
				{
					padding: 5px 0px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.o-l
					{
						font-size: 15px;
					}
					.o-r
					{
						display: flex;
						position: relative;
						align-items: center;
						justify-content: center;
						width: 100px;
						height: 24px;
						border-radius: 4px;
						border: 1px solid #E6E6E6;
						.num
						{
						}
						.reduce
						{
							border-right: 1px solid #EEE;
							position: absolute;
							width: 24px;
							height: 24px;
							text-align: center;
							line-height: 24px;
							background: #F8F8F8;
							left: 0;
							cursor: pointer;
						}
						.plus
						{
							border-left: 1px solid #EEE;
							position: absolute;
							right: 0;
							width: 24px;
							height: 24px;
							text-align: center;
							line-height: 24px;
							background: #3388FF;
							color: #FFF;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
</style>
